<!DOCTYPE html>
<html>
<head>
    <title>Parallel Plate Capacitor Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="550"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration & Parameters ---
    const xc_center = 220;
    const dist_ca = 80; // 2 mm * 40 px/mm
    const dist_ab = 160; // 4 mm * 40 px/mm
    const xa_center = xc_center + dist_ca;
    const xb_center = xa_center + dist_ab;

    const plate_y = 110;
    const plate_height = 300;
    const plate_width = 12;

    const dim_line_y = 70;
    const ground_y_start = plate_y + plate_height;
    const ground_y_end = ground_y_start + 50;

    // --- Drawing Functions ---

    /**
     * Draws a rectangular plate.
     * @param {number} x - The center x-coordinate.
     * @param {number} y - The top y-coordinate.
     * @param {number} w - The width.
     * @param {number} h - The height.
     */
    function drawPlate(x, y, w, h) {
        ctx.fillStyle = '#EBEBEB';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillRect(x - w / 2, y, w, h);
        ctx.strokeRect(x - w / 2, y, w, h);
    }

    /**
     * Draws a ground symbol.
     * @param {number} x - The center x-coordinate of the connection point.
     * @param {number} y - The y-coordinate of the connection point.
     */
    function drawGround(x, y) {
        ctx.lineWidth = 1.5;
        const len1 = 30;
        const len2 = 20;
        const len3 = 10;
        const spacing = 5;
        ctx.beginPath();
        ctx.moveTo(x - len1 / 2, y);
        ctx.lineTo(x + len1 / 2, y);
        ctx.moveTo(x - len2 / 2, y + spacing);
        ctx.lineTo(x + len2 / 2, y + spacing);
        ctx.moveTo(x - len3 / 2, y + 2 * spacing);
        ctx.lineTo(x + len3 / 2, y + 2 * spacing);
        ctx.stroke();
    }
    
    // --- Main Drawing Logic ---

    // 1. Draw Plates
    drawPlate(xc_center, plate_y, plate_width, plate_height);
    drawPlate(xa_center, plate_y, plate_width, plate_height);
    drawPlate(xb_center, plate_y, plate_width, plate_height);

    // 2. Draw Plate Labels (A, B, C)
    ctx.fillStyle = 'black';
    ctx.font = '24px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('C', xc_center - 30, plate_y);
    ctx.fillText('A', xa_center - 30, plate_y);
    ctx.fillText('B', xb_center + 30, plate_y);

    // 3. Draw Dimension Lines
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '18px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // Ticks
    const tickHeight = 10;
    ctx.beginPath();
    ctx.moveTo(xc_center, dim_line_y - tickHeight);
    ctx.lineTo(xc_center, dim_line_y + tickHeight);
    ctx.moveTo(xa_center, dim_line_y - tickHeight);
    ctx.lineTo(xa_center, dim_line_y + tickHeight);
    ctx.moveTo(xb_center, dim_line_y - tickHeight);
    ctx.lineTo(xb_center, dim_line_y + tickHeight);
    ctx.stroke();

    const arrowSize = 6;
    // Dimension: 2 mm
    ctx.beginPath();
    ctx.moveTo(xc_center, dim_line_y);
    ctx.lineTo(xa_center, dim_line_y);
    // Arrows for 2mm
    ctx.moveTo(xc_center + arrowSize, dim_line_y - arrowSize * 0.7);
    ctx.lineTo(xc_center, dim_line_y);
    ctx.lineTo(xc_center + arrowSize, dim_line_y + arrowSize * 0.7);
    ctx.moveTo(xa_center - arrowSize, dim_line_y - arrowSize * 0.7);
    ctx.lineTo(xa_center, dim_line_y);
    ctx.lineTo(xa_center - arrowSize, dim_line_y + arrowSize * 0.7);
    ctx.stroke();
    ctx.fillText('2 mm', (xc_center + xa_center) / 2, dim_line_y - 4);

    // Dimension: 4 mm
    ctx.beginPath();
    ctx.moveTo(xa_center, dim_line_y);
    ctx.lineTo(xb_center, dim_line_y);
    // Arrows for 4mm
    ctx.moveTo(xa_center + arrowSize, dim_line_y - arrowSize * 0.7);
    ctx.lineTo(xa_center, dim_line_y);
    ctx.lineTo(xa_center + arrowSize, dim_line_y + arrowSize * 0.7);
    ctx.moveTo(xb_center - arrowSize, dim_line_y - arrowSize * 0.7);
    ctx.lineTo(xb_center, dim_line_y);
    ctx.lineTo(xb_center - arrowSize, dim_line_y + arrowSize * 0.7);
    ctx.stroke();
    ctx.fillText('4 mm', (xa_center + xb_center) / 2, dim_line_y - 4);


    // 4. Draw Ground Connections
    ctx.lineWidth = 1.5;
    // Connection for Plate C
    ctx.beginPath();
    ctx.moveTo(xc_center, ground_y_start);
    ctx.lineTo(xc_center, ground_y_end);
    ctx.lineTo(xc_center - 40, ground_y_end);
    ctx.stroke();
    drawGround(xc_center - 40, ground_y_end);
    
    // Connection for Plate B
    ctx.beginPath();
    ctx.moveTo(xb_center, ground_y_start);
    ctx.lineTo(xb_center, ground_y_end);
    ctx.lineTo(xb_center + 40, ground_y_end);
    ctx.stroke();
    drawGround(xb_center + 40, ground_y_end);

    // 5. Draw Bottom Text Label
    ctx.fillStyle = 'black';
    ctx.font = '22px KaiTi, STKaiti, "楷体", serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 7-45 图', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>